<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户角色管理</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
        <!-- 页面标题 -->
        <h1 class="page-title">用户角色管理</h1>

        <!-- 搜索区域 -->
        <div class="search-group mb-4">
            <input type="text" id="search" class="form-control" placeholder="搜索用户ID或角色ID">
            <button class="btn btn-primary" onclick="search()">搜索</button>
        </div>

        <!-- 数据表格 -->
        <table class="table table-bordered align-middle text-center">
            <thead class="table-primary">
            <tr>
                <th>ID</th>
                <th>用户ID</th>
                <th>角色ID</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="data-body"></tbody>
        </table>

<script>
    function loadData(query = '') {
        console.log("发送请求，搜索关键字:", query);
        $.get(`/userRole/list`, { search: query }, function (data) {
            console.log("返回数据:", data);
            const rows = data.map(item => `
            <tr>
                <td>${item.id}</td>
                <td><input value="${item.userId}" data-id="${item.id}" class="form-control userId" readonly /></td>
                <td><input value="${item.roleId}" data-id="${item.id}" class="form-control roleId" readonly /></td>
                <td>
                    <button class="btn btn-edit btn-sm" onclick="toggleEdit(this, ${item.id})">编辑</button>
                    <button class="btn btn-delete btn-sm" onclick="remove(${item.id})">删除</button>
                </td>
            </tr>
        `).join('');
            $('#data-body').html(rows);
        });
    }

    function search() {
        const keyword = $('#search').val().trim();
        loadData(keyword);
    }

    $(document).ready(function () {
        loadData();  // 页面加载即查询全部
    });

    function toggleEdit(btn, id) {
        const isEditing = $(btn).text() === '保存';
        const userInput = $(`.userId[data-id=${id}]`);
        const roleInput = $(`.roleId[data-id=${id}]`);

        if (isEditing) {
            update(id);
            userInput.prop('readonly', true);
            roleInput.prop('readonly', true);
            $(btn).text('编辑');
        } else {
            userInput.prop('readonly', false);
            roleInput.prop('readonly', false);
            $(btn).text('保存');
        }
    }

    function update(id) {
        const userId = $(`.userId[data-id=${id}]`).val();
        const roleId = $(`.roleId[data-id=${id}]`).val();
        $.ajax({
            url: '/userRole/update',
            type: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify({ id, userId, roleId }),
            success: () => loadData($('#search').val())
        });
    }

    function remove(id) {
        $.ajax({
            url: `/userRole/delete/${id}`,
            type: 'DELETE',
            success: () => loadData($('#search').val())
        });
    }
</script>

</body>
</html>
